<!--数据字典管理-->
<template>
    <div>
        <a-card>
            <p slot="title">
                检索条件
            </p>
            <div  class="formSearch">
                <a-form ref="sysDictDTO" :model="sysDictDTO" :label-width="80" layout="inline"
                        @keydown.native.enter.prevent="handleSubmit">
                    <a-form-item label="关键字：" prop="searchKey">
                        <a-input v-model="searchKey" placeholder="请输入附件名称搜索" style="width: 220px"
                                 :maxlength="100"
                                 allowClear />
                    </a-form-item>
                    <a-form-item label="附件分类：" prop="attaSort">
                        <a-select  v-model="attaSort" allowClear style="width:220px"
                                   placeholder="全部">
                            <a-select-option v-for="item in attaSorts" :value="item.value" :key="item.value">{{
                                item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-button type="primary" @click="handleSubmit"
                              v-if="hasPermission('sysatta:findSysAttaInfos')">查询
                    </a-button>
                    <a-button style="margin-left: 8px" @click="reStore">重置</a-button>
                </a-form>
            </div>
        </a-card>
        <div style="height: 10px"></div>
        <div class="commonStyle nyContent">
            <a-table :columns="columns" :dataSource="getsysDictDTOs"
                     :rowKey="record => record.id"
                     :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ (page.currentPage - 1) * page.pageSize + index + 1 }}
                </span>
                <span slot="operation" slot-scope="text" class="table-operation">
                         <a @click="downloadAtta(text)" v-if="downloadBtnShow ">
                            下载</a>
                </span>
            </a-table>
            <Page :totalCount="pageVal.total" :currentPage="pageVal.currentPage" ref="page"
                  :pageSize="pageVal.pageSize" @changePage="changePage"
                  @changePageSize="changePageSize" />
        </div>
        <iframe id="ifile" style="display: none"></iframe>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import * as State from '../../../libs/baseStateConts'
    import Page from 'module/pagination'
    export default {
        name: 'sys_atta',
        components: {
            Page
        },
        data () {
            return {
                token: sessionStorage.getItem ('token'),
                searchKey: '',
                attaSort: undefined,
                attaSorts: [],
                array: [ 10, 20, 30, 40 ],
                /*选中的记录*/
                downloadBtnShow: false,
                sysDictDTO: {
                    id: '',
                    attaSort: '',
                    objectId: '',
                    type: '',
                    name: '',
                    size: '',
                    extendName: '',
                    createTime: ''
                },
                page: {
                    currentPage: 1,
                    pageSize: 10
                },
                columns: [
                    {title: '序号', key: 'index', width: '7%', align: 'center', scopedSlots: {customRender: 'index'}},
                    {title: '附件分类', dataIndex: 'attaSort', key: 'attaSort', scopedSlots: {customRender: 'attaSort'}},
                    {title: '所属对象ID', dataIndex: 'objectId', key: 'objectId'},
                    {title: '附件名称', dataIndex: 'name', key: 'name'},
                    {title: '附件大小', dataIndex: 'size', key: 'size'},
                    {title: '附件扩展名', dataIndex: 'extendName', key: 'extendName'},
                    {title: '创建时间', dataIndex: 'createTime', key: 'createTime'},
                    {title: '操作', key: 'operation', width: '13%', scopedSlots: {customRender: 'operation'}}
                ],
                columns1: [
                    {
                        type: 'index2',
                        title: '序号',
                        width: 70,
                        align: 'center',
                        render: ( h, params ) => {
                            return h ('span', params.index + ( this.page.currentPage - 1 ) * this.page.pageSize + 1)
                        }
                    },
                    {
                        key: 'attaSort',
                        title: '附件分类',
                        align: 'center',
                        minWidth: 160,
                        render: ( h, params ) => {
                            return h ('span', {}, this.randerDictText (this.attaSorts, params.row.attaSort))
                        }
                    },
                    {
                        key: 'objectId',
                        title: '所属对象ID',
                        align: 'center',
                        minWidth: 180
                    },
                    /*
                     {
                     key: 'type',
                     title: '类型',
                     align: 'center',
                     },
                     */
                    {
                        key: 'name',
                        title: '附件名称',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        key: 'size',
                        title: '附件大小',
                        align: 'center',
                        minWidth: 100
                    },
                    {
                        key: 'extendName',
                        title: '附件扩展名',
                        align: 'center',
                        minWidth: 100
                    },
                    {
                        key: 'createTime',
                        title: '创建时间',
                        align: 'center',
                        minWidth: 160
                    },
                    {
                        key: 'handle',
                        title: '操作',
                        align: 'center',
                        minWidth: 120,
                        render: ( h, params ) => {
                            return h ('Button', {
                                props: {
                                    type: 'text',
                                    size: 'large'
                                },
                                style: {
                                    display: this.downloadBtnShow ? 'inline-block' : 'none'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id
                                        let url = State.downloadSysAttachmentURL + '?id=' + id + '&token=' + this.token
                                        document.getElementById ('ifile').src = State.downloadSysAttachmentURL + '?id=' + id + '&token=' + this.token
                                    }
                                }
                            }, '下载')
                        }
                    }
                ]
            }
        },
        computed: {
            getsysDictDTOs () {
                return this.$store.state.sysAtta.sysAttaInfoDTOs
            },
            ...mapState ({
                pageVal: state => state.sysAtta.page
            })
        },
        methods: {
            reStore(){
                this.searchKey = ''
                this.attaSort = undefined
                this.page.currentPage = 1
                this.init();
            },
            /**
             * Function    : init
             * Description : 初始化加载页面
             * Input       : none
             * Return      : none
             */
            init () {
                let para = Object.assign ({},
                  {searchKey: this.searchKey.trim ()},
                  {attaSort: this.attaSort}, this.page)
                this.$store.dispatch ('findSysAttaInfosAct', para)
            },
            downloadAtta(text){
                let id = text.id
                let url = State.downloadSysAttachmentURL + '?id=' + id + '&token=' + this.token
                document.getElementById ('ifile').src = State.downloadSysAttachmentURL + '?id=' + id + '&token=' + this.token

            },

            /**
             * Function    : changePage
             * Description : 切换页码
             * Input       : val 切换的页码
             * Return      : none
             */
            changePage ( val ) {
                this.page.currentPage = val
                this.init ()
            },

            /**
             * Function    : changePageSize
             * Description : 切换页面条数
             * Input       : val 切换的页面条数
             * Return      : none
             */
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.currentPage = 1
                this.init ()
            },

            /**
             * Function    : handleSubmit
             * Description : 提交请求
             * Input       : none
             * Return      : none
             */
            handleSubmit () {
                this.page.currentPage = 1
                this.init ()
            }
        },
        created () {
            this.$loadSysDicts (this.$dicts.sortCode.ATTA_SORTS, this.attaSorts)
            this.downloadBtnShow = this.hasPermission ('sysatta:downloadSysAttachment')
            if (!this.downloadBtnShow) {
                this.columns1 = this.columns1.splice (0, 7)
                this.columns1.shift ()
            }
            this.init ()
        }
    }
</script>
